<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        /*覆盖浏览器的样式*/
        * {
            padding: 0;
            margin: 0;
        }
        /*margin为auto*/
        h1 {
            margin: auto;
            color:blueviolet;
            border: 1px solid red;
        } 
        /*设置margin的四个值:上 右  下 左*/ 
        h2 {
            margin: 30px 10em 15px 10px;
            border: 1px solid red;
        }
        
        /*父元素有width《会根据窗口大小调整大小*/
        div {
            width: 500px;
        }
        /*父元素没有width，会根据窗口大小调整大小*/
        p:first-child {
            margin:10%;
            border: 1px solid red;
        }
        p {
            margin: 10%;
            border: 1px solid red;
        }
        strong {
            margin-top: 25px;
            background: silver;
        }

        </style>
    </head>
    <body>
        <h1>我外边距是auto</h1>
        <h2>我外边距有四个值</h2>
        <p>我的外边距为百分数</p>
        <div>
        <p>我的<strong>外边距</strong>也是百分数</p>
    </div>
    </body>
</html>

